<template>

  <el-container>
    <el-header style="width: 1500px;height: 376px;margin: 0 auto;background-color: #392f59">
      <div >
        <div style="width: 300px;float: left;position: relative;top: 70px;left: 50px; overflow: hidden;">
          <img src="https://p0.pipi.cn/mmdb/fb738651be1ddd16bd11e50734be6f41e8fae.jpg?imageView2/1/w/464/h/644"
               alt="志愿军：雄兵出击海报封面" style="width: 232px;height: 322px">
        </div>
        <div style="width: 900px;height: 155px;position: relative;top: 70px;color: #fff;font-size: 14px;z-index: 1;">
          <h1 style="font-size: 26px;">志愿军：雄兵出击</h1>
          <div style="font-size: 18px; ">The Volunteers: To the War</div>
          <ul style="list-style: none;padding-left: 0;margin-bottom: 20px;">
            <li class="ellipsis">
              <a class="text-link" href="/films?catId=1" target="_blank"> 剧情 </a>
              <a class="text-link" href="/films?catId=20" target="_blank"> 历史 </a>
              <a class="text-link" href="/films?catId=12" target="_blank"> 战争 </a>
            </li>
            <li class="ellipsis">
              中国大陆
              / 140分钟
            </li>
            <li class="ellipsis">2023-09-28 18:00中国大陆上映</li>
          </ul>
          <div  >
            <a  >
              <el-radio-group >
                <el-button type="primary" >想看</el-button>
                <el-button type="danger" >
                  <router-link to="/cinemas">购票</router-link>

                </el-button>
              </el-radio-group>
            </a> <br>
            <a >
              评分
              <el-rate v-model="value1" />
            </a>
          </div>
        </div>


      </div>
    </el-header>
    <br>
    <div id="content">
      <el-container>
        <el-main style="width: 900px" >
          <div class="tab-title-container clearfix">
            <div class="tab-title active" data-act="tab-desc-click">介绍</div>
            <div class="tab-title" data-act="tab-celebrity-click">演职人员</div>
            <div class="tab-title tab-disabled" data-act="tab-award-click">奖项</div>
            <div class="tab-title " data-act="tab-img-click">图集</div>
          </div>
          <br>
          <div >
            <div class="module">
              <h2>剧情简介</h2>
            </div>
            <div >
              <p>为纪念抗美援朝战争胜利70周年，陈凯歌将打造《志愿军》三部曲，全景式、多维度立体展现这场新中国的立国之战。电影《志愿军：雄兵出击》为该系列首部。
                1949年建国初期，新中国面临“内忧外患”局面。朝鲜内战爆发以来，美军屡在中朝边境挑衅，平民惨遭轰炸。为了维护来之不易的和平、为了世代长久的安稳，1950年10月，中国人民志愿军入朝，“抗美援朝”战争拉开帷幕。
                这是一场“举国之战”——
                朝鲜战场，即使军备实力对比悬殊，我军却用壮烈牺牲换回节节胜利；
                外交舞台，中华人民共和国代表团首度亮相联合国，中国新声赢得国际敬畏。
                新中国，寸土不让扬国威；新青年，意气风发保家国。
              </p>

            </div>
          </div>
          <div class="or" >
            <div class="mod-title">
              <h2>演职人员</h2>
              <a class="more" href="#celebrity" data-act="all-actor-click">全部</a>
            </div>
            <div class="mod-content">
              <div class="celebrity-container clearfix">

                <div class="celebrity-group">
                  <div class="celebrity-type">
                    导演
                  </div>
                  <ul class="celebrity-list clearfix">
                    <li class="celebrity " data-act="celebrity-click" data-val="{celebrityid:8023}">
                      <!-- <a href="/films/celebrity/8023" target="_blank" class="portrait"> -->
                      <div class="portrait">
                        <img class="default-img" alt="志愿军：雄兵出击 陈凯歌" src="https://p0.pipi.cn/basicdata/25bfd6dd71f5bfbe12d23c845acf9a08f8f83.jpg?imageView2/1/w/128/h/170">
                      </div>
                      <!-- </a> -->
                      <div class="info">
                        <!-- <a href="/films/celebrity/8023" target="_blank" class="name"> -->
                        <div class="name">
                          陈凯歌
                        </div>
                        <!-- </a> -->
                      </div>
                    </li>

                  </ul>
                </div>


                <div class="celebrity-group"  >
                  <div class="celebrity-type">
                    演员
                  </div>
                  <ul class="celebrity-list clearfix" style="display: flex; list-style: none;">
                    <li class="celebrity actor" data-act="celebrity-click" data-val="{celebrityid:1400}">
                      <!-- <a href="/films/celebrity/1400" target="_blank" class="portrait"> -->
                      <div class="portrait">
                        <img class="default-img" alt="志愿军：雄兵出击 唐国强" src="https://p0.pipi.cn/basicdata/25bfd6d7b5333892350faf138ec2a8484b3d1.jpg?imageView2/1/w/128/h/170">
                      </div>
                      <!-- </a> -->
                      <div class="info">
                        <!-- <a href="/films/celebrity/1400" target="_blank" class="name"> -->
                        <div class="name">
                          唐国强
                        </div>
                        <!-- </a> -->
                        <br><span class="role">饰：毛泽东</span>
                      </div>
                    </li>

                    <li class="celebrity actor" data-act="celebrity-click" data-val="{celebrityid:599}">
                      <!-- <a href="/films/celebrity/599" target="_blank" class="portrait"> -->
                      <div class="portrait">
                        <img class="default-img" alt="志愿军：雄兵出击 王砚辉" src="https://p0.pipi.cn/basicdata/25bfd6d7537c6906d6537c125c2522014f985.jpg?imageView2/1/w/128/h/170">
                      </div>
                      <!-- </a> -->
                      <div class="info">
                        <!-- <a href="/films/celebrity/599" target="_blank" class="name"> -->
                        <div class="name">
                          王砚辉
                        </div>
                        <!-- </a> -->
                        <br><span class="role">饰：彭德怀</span>
                      </div>
                    </li>

                    <li class="celebrity actor" data-act="celebrity-click" data-val="{celebrityid:8424}">
                      <!-- <a href="/films/celebrity/8424" target="_blank" class="portrait"> -->
                      <div class="portrait">
                        <img class="default-img" alt="志愿军：雄兵出击 刘劲" src="https://p0.pipi.cn/basicdata/25bfd6d7b533380fafc696ace0bf9a53d5fda.jpg?imageView2/1/w/128/h/170">
                      </div>
                      <!-- </a> -->
                      <div class="info">
                        <!-- <a href="/films/celebrity/8424" target="_blank" class="name"> -->
                        <div class="name">
                          刘劲
                        </div>
                        <!-- </a> -->
                        <br><span class="role">饰：周恩来</span>
                      </div>
                    </li>

                    <li class="celebrity actor" data-act="celebrity-click" data-val="{celebrityid:5623}">
                      <!-- <a href="/films/celebrity/5623" target="_blank" class="portrait"> -->
                      <div class="portrait">
                        <img class="default-img" alt="志愿军：雄兵出击 辛柏青" src="https://p0.pipi.cn/basicdata/fb738633030ddd7df5281e482f99adb8c581c.png?imageView2/1/w/128/h/170">
                      </div>
                      <!-- </a> -->
                      <div class="info">
                        <!-- <a href="/films/celebrity/5623" target="_blank" class="name"> -->
                        <div class="name">
                          辛柏青
                        </div>
                        <!-- </a> -->
                        <br><span class="role">饰：李默尹</span>
                      </div>
                    </li>

                  </ul>
                </div>

              </div>

            </div>
          </div>
          <div class="module">
            <div class="mod-title">
              <h2>图集</h2>
              <a class="more" href="#img" data-act="all-photo-click">全部</a>
            </div>
            <div class="mod-content">
              <div class="album clearfix" data-act="movie-img-click">
                <div class="img1"><img class="default-img" alt="志愿军：雄兵出击剧照图集" src="https://p0.pipi.cn/friday/edbd2fca458df8d53feaf2ead6c23493.jpg?imageView2/1/w/465/h/258"></div>
                <div class="img2"><img class="default-img" alt="志愿军：雄兵出击剧照图集" src="https://p0.pipi.cn/friday/1d90836979486e4452e15db87c135e08.jpg?imageView2/1/w/126/h/126"></div>
                <div class="img3"><img class="default-img" alt="志愿军：雄兵出击剧照图集" src="https://p0.pipi.cn/friday/3adbb696c56010b9aca1d884fb5f178f.jpg?imageView2/1/w/126/h/126"></div>
                <div class="img4"><img class="default-img" alt="志愿军：雄兵出击剧照图集" src="https://p0.pipi.cn/friday/0fb9864cb3e7f749d3b1125836048147.jpg?imageView2/1/w/126/h/126"></div>
                <div class="img5"><img class="default-img" alt="志愿军：雄兵出击剧照图集" src="https://p0.pipi.cn/friday/c611b83bf66f9625db8a5ea02dab7b9d.jpg?imageView2/1/w/126/h/126"></div>
              </div>

            </div>
          </div>
          <div class="module">
            <div class="mod-title">
              <h2>影片资料</h2>
            </div>
            <div class="mod-content">
              <div class="attribute">
                <div class="attribute-item">
                  <div class="attribute-item-top">
                    <img class="attribute-item-icon" src="https://p0.meituan.net/mmdb/1764aeeb280e07c55b861481cc717e2c1511.png@14w_14h_1e_1c">
                    <span class="attribute-item-title">出品发行</span>
                  </div>
                  <div class="attribute-item-content ellipsis">中影创意（北京）电影有限公司</div>
                </div>
                <div class="attribute-item">
                  <div class="attribute-item-top">
                    <img class="attribute-item-icon" src="https://p0.meituan.net/mmdb/c694fd8f82f4e706e5318a5175265b552010.png@14w_14h_1e_1c">
                    <span class="attribute-item-title">技术参数</span>
                  </div>
                  <div class="attribute-item-content ellipsis">2小时20分钟</div>
                </div>
              </div>

            </div>
          </div>
        </el-main>

        <el-aside style="width: 380px;height: 686px; ">

          <div >
            <h2>相关视频</h2>
          </div>
          <div >
            <div >
              <ul>
                <li class="top-list">
                  <div>
                    <div >
                      <a href="http://imovie.pipi.cn/films/1431886/preview?videoId=500051" target="_blank" data-act="video-click" data-val="{videoId:500051}">
                        <img src="https://p0.pipi.cn/friday/5466fa611942c483876ee0ffd83a110f.jpg?imageView2/1/w/120/h/68" alt="">
                      </a>
                    </div>
                    <div >
                      <p class="one-line">
                        <a href="http://imovie.pipi.cn/films/1431886/preview?videoId=500051" target="_blank" data-act="video-click" data-val="{videoId:500051}">
                          《志愿军：雄兵出击》《志愿军：雄兵出击》曝终极预告 危机至战士以钢铁意志共筑和平路
                        </a>
                      </p>
                      <div >
                        <span >799.1万</span>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="top-list">
                  <div>
                    <div class="top-info-thumb">
                      <a href="http://imovie.pipi.cn/films/1431886/preview?videoId=499978" target="_blank" data-act="video-click" data-val="{videoId:499978}">
                        <img src="https://p0.pipi.cn/friday/5538e8a39ea4fd6d7fe7c570f5a68dc9.jpg?imageView2/1/w/120/h/68" alt="">
                        <i class="ranking top-info-icon orange-bg">2</i>
                        <i class="play-icon"></i>
                      </a>
                    </div>
                    <div class="top5-video-info">
                      <p class="one-line">
                        <a href="http://imovie.pipi.cn/films/1431886/preview?videoId=499978" target="_blank" data-act="video-click" data-val="{videoId:499978}">
                          《志愿军：雄兵出击》《志愿军：雄兵出击》曝军歌嘹亮预告 战场回响凝成生死与共的情义
                        </a>
                      </p>
                      <div class="video-view">
                        <span class="video-play-count">211.2万</span>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="top-list">
                  <div>
                    <div class="top-info-thumb">
                      <a href="http://imovie.pipi.cn/films/1431886/preview?videoId=498771" target="_blank" data-act="video-click" data-val="{videoId:498771}">
                        <img src="https://p0.pipi.cn/friday/b066a9a072f5ed0904afbf6e79a3ba7b.jpg?imageView2/1/w/120/h/68" alt="">
                        <i class="ranking top-info-icon orange-bg">3</i>
                        <i class="play-icon"></i>
                      </a>
                    </div>
                    <div class="top5-video-info">
                      <p class="one-line">
                        <a href="http://imovie.pipi.cn/films/1431886/preview?videoId=498771" target="_blank" data-act="video-click" data-val="{videoId:498771}">
                          《志愿军：雄兵出击》《志愿军：雄兵出击》贴片预告
                        </a>
                      </p>
                      <div class="video-view">
                        <span class="video-play-count">129.7万</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </el-aside>
      </el-container>
    </div>

  </el-container>

</template>

<script setup>

import { ref } from 'vue'

const value1 = ref(null)
const value2 = ref(null)
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }



</script>
<style>
body {
  font-family: Microsoft YaHei,Helvetica,Arial,sans-serif;
  background-color: #fff;
  -webkit-font-smoothing: subpixel-antialiased;
}
a{
  text-decoration: none;
  color: inherit;
}
.module{
  width: 700px;
}
.module .mod-content {
  margin-top: 20px;
  color: #333;
}

#d1{
  display: block;
  position: relative;
}
.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
#content{
  width: 1501px;
  height: 2000px;
  margin-left: auto;
  margin-right: auto;
}

element.style {
}
.tab-title.active {
  color: #ef4238;
  border-bottom-color: #ef4238;
}
.tab-title {
  cursor: pointer;
  float: left;
  margin-right: 30px;
  margin-bottom: -2px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #333;
  line-height: 100%;
  border-bottom: 2px solid transparent;
}

</style>
